<template>
    <div>
        <div v-for="(item,index) in banner" :key="index" v-if="banner.length != 0">
            <el-dialog :width="item.width" :show-close="false" :visible.sync="item.dialogShow" :modal-append-to-body="false" :close-on-click-modal="false">

                <img :src="PIC_URL + '/experience/x_big.png'" class="close" @click="onClose(index,item)"></img>
                
                <div class="content" v-if="item.isCustomStyle == 1 && item.styleLink != null" :style="{width: item.width,height:item.height}">
                    <Coms :src="item.styleLink" :isRatio="false" style="width: 100%;"></Coms>
                </div>
                <div class="content111" @click="onImg(item.link)" v-if="item.isCustomStyle == 0 && item.imgUrlClient != null" :style="{width: item.width,height:item.height}">
                    <el-image style="width: 100%; height: 100%" :src="item.imgUrlClient" fit="cover"></el-image>
                </div>
                <div class="popup-footer">
                    <el-checkbox v-model="item.checked" @change="changeItem(item)"></el-checkbox>
                    不再提醒
                </div>

            </el-dialog>
        </div>
    </div>
</template>

<script>

import {windowOpen} from "@/common/common";
import Coms from "./coms/index";
import md5 from "md5";

import {getPcUserInfo} from "../api/api";

export default {
    name: "popup",
    components: {Coms},
    data() {
        return {
            dialogShow: false,
            checked: false,
            time: 0,
            banner: [],
            isPopup: true,
            token: '',
            userInfo: {

            },
        }
    },
    mounted() {
        let date = new Date();
        let y = date.getFullYear();
        let m = date.getMonth();
        let d = date.getDate();

        this.time = new Date(y, m, d).getTime();
        this.token = this.$route.query.token || '';
        setTimeout(()=>{
            this.getUser();
        },500);
    },
    methods: {
        getUser(){
            getPcUserInfo({clientCentralToken: this.token}).then(res=>{
                this.userInfo = res.data;
            }).catch(err=>{

            })
        },

        //是否显示弹出
        init(bannerArr = []) {

            if (bannerArr && bannerArr.length != 0) {

                bannerArr.sort((a, b) => {
                    return  b.sortno - a.sortno
                });

                for (let obj of bannerArr) {
                    if (obj.place == "SYTC") {
                        obj.checked = false;
                        obj.dialogShow = true;
                        let val = localStorage.getItem(this.time + obj.id + this.userInfo.userId);
                        //没有点击不再提醒直接显示广告
                        if (val == null || val == undefined) {
                            this.banner.push(obj);
                        } else { //内容是否变动显示
                            if (val != md5(JSON.stringify(obj))) {
                                this.banner.push(obj);
                            }
                        }
                    }
                }


                console.log("banner",this.banner)


            }
        },
        onClose(index,item) {
            //是否今日不再显示
            if (item.checked) {
                let obj = Object.assign({},item,{checked: false})
                localStorage.setItem(this.time + item.id + this.userInfo.userId, md5(JSON.stringify(obj)));
            }
            item.dialogShow = false;
            this.$forceUpdate();
        },
        changeItem(item){
            this.$forceUpdate()
        },
        onImg(url) {
            if (url) {
                windowOpen(url);
            }
        }
    }
}
</script>

<style scoped lang="scss">

.el-icon-error {
    position: absolute;
    right: -30px;
    top: -30px;
    font-size: 30px;
    color: #FFFFFF;
}

.close {
    width: 44px;
    height: 44px;
    position: absolute;
    right: -44px;
    top: -44px;
}

.content {
    width: 100%;
    height: auto;
}

.popup-footer {
    width: calc(100% - 20px);
    height: 40px;
    line-height: 40px;
    text-align: right;
    font-size: 16px;
    color: #333333;
    padding-right: 20px;
    background-color: #f5f5f5;
}
</style>

<style>

.el-dialog__body {
    border: 1px solid #949499;
}

.el-checkbox__inner {
    border-color: #333333 !important;
    margin-right: 6px;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #FFFFFF;
    border-color: #333333;
}

.el-checkbox__inner::after {
    border: 1px solid #333333;
    border-left: 0;
    border-top: 0;
}

.el-checkbox__input {
    position: relative;
    top: 1px;
}
</style>